<template>
  <div id="app">
    <div style="margin: 20px;">
      <ve-line :data="chartData" width="600px" height="400px" />
    </div>
    <div style="margin: 20px;">
      backgroundColor
      <ve-line :data="chartData" background-color="#eee" width="600px" height="400px" />
      colors
      <ve-line :data="chartData" :colors="chartColors" width="600px" height="400px" />
      visualMap
      <ve-line :data="chartData" :visual-map="visualMap" width="600px" height="400px" />
      dataZoom
      <ve-line :data="chartData" :data-zoom="dataZoom" width="600px" height="400px" />
      toolbox
      <ve-line :data="chartData" :toolbox="toolbox" width="600px" height="400px" />
      title
      <ve-line :data="chartData" :title="title" width="600px" height="400px" />
      others
      <ve-line
        :legend="legend"
        :x-axis="xAxis"
        :y-axis="yAxis"
        :radar="radar"
        :tooltip="tooltip"
        :axis-pointer="axisPointer"
        :brush="brush"
        :geo="geo"
        :timeline="timeline"
        :graphic="graphic"
        :series="series"
        :text-style="textStyle"
        :after-config="afterConfig"
        width="600px"
        height="400px"
      />
    </div>
  </div>
</template>

<script>
import chartData from './data.js'
export default {
  name: 'echarts',
  data() {
    return {
      chartColors: ['#c23531', '#2f4554', '#61a0a8', '#d48265'],
      visualMap: [{ type: 'continuous' }],
      dataZoom: [
        {
          id: 'dataZoomX',
          type: 'slider',
          xAxisIndex: [0],
          filterMode: 'filter'
        }
      ],
      toolbox: {
        show: true,
        feature: {
          dataZoom: { yAxisIndex: 'none' },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      title: {
        textAlign: 'left',
        text: 'chart-title',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal'
        }
      },
      legend: {},
      xAxis: {},
      yAxis: {},
      radar: {},
      tooltip: {},
      axisPointer: {},
      brush: {},
      geo: {},
      timeline: {},
      graphic: {},
      series: {},
      textStyle: {},
      chartData
    }
  }
}
</script>
